<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            <span> 整体控制图层显示或隐藏 ： </span>
            <i-switch v-model="show_Element" size="large">
                <span slot="open">显示</span>
                <span slot="close">隐藏</span>
            </i-switch>
            <br><br>
            <span> 事件控制开关 ： </span>
            <i-switch v-model="start_click" size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>
            <br><br>
            <span>单独控制元素显示或隐藏</span>
            <br><br>
            <div class="itemBox">
                <label>圆形1 ：</label>
                <i-switch v-model="elementStatus.circle" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
            <div class="itemBox">
                <label>圆形2 ：</label>
                <i-switch v-model="elementStatus.circle2" size="large">
                    <span slot="open">显示</span>
                    <span slot="close">隐藏</span>
                </i-switch>
            </div>
        </div>
    </div>
</template>
<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
var _Element = null;

export default {
    data() {
        return {
            show_Element: true,
            start_click: true,
            SenceMode: '2D',
            elementStatus: {
                circle: true,
                circle2: true,
            },
        }
    },
    watch: {
        start_click(newValue) {
            _Element && (_Element.StartClickEvent = newValue);
            _Element && (_Element.StartRightClickEvent = newValue);
            _Element && (_Element.StartDBLClickEvent = newValue);
            _Element && (_Element.StartHoverEvent = newValue);
        },
        show_Element(newValue) {
            // 控制元素图层显示和隐藏
            _Element && (_Element.show = newValue);
        },
        elementStatus: {
            deep: true,
            handler(value) {
                for (const key in value) {
                    const element = value[key];
                    var Entity = _Element.GetMappingById(key);
                    Entity && (Entity.show = element);
                }
            }
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);

        map.flytochina();
        // 创建元素图形图层
        // Click 开启点击事件关联
        // RightClick 开启右键点击事件关联
        _Element = new simpleMap.ElementDataSource(map, { Click: true, RightClick: true, DBLClick: true, Hover: true });

        // Multi 开头 为多选事件，此处不单独做实例演示
        // 效果为选取 鼠标所在位置 10*10 像素的全部 图层元素； 

        // 'MultiClick', 左键单击多选
        // 'MultiRightClick', 右键单击多选
        // 'MultiDBLClick', 左键双击多选


        _Element.on('Click', (item) => {
            this.$Message.info({
                content: '图层通用左键点击事件 ：' + item.options.data.text
            })
        });
        _Element.on('RightClick', (item, position) => {
            this.$Message.info({
                content: '图层通用右键点击事件 ：' + item.options.data.text
            })
        })
        _Element.on('DBLClick', (item, position) => {
            this.$Message.info({
                content: '图层通用双击点击事件 ：' + item.options.data.text
            })
        })

        // Hover 事件由于触发过于频繁，并且需要对点进行缓存，
        // 目前只做 图层事件， 元素不具有Hover事件
        // 注 ： 在图层元素过多时， Hover 的效率会严重下降
        _Element.on('Hover', (items) => {
            this.$Message.info({
                content: '图层通用Hover事件 ：' + (items.map(item => item.id).join() || '空')
            })
        })


        // 创建圆形元素
        // add返回值可以返回当前创建的元素对象
        var circle = _Element.add('circle', {
            id: 'circle',
            data: {
                text: '这是一段信息，用来显示自定义内容',
            },
            radius: 200000, // 半径
            point: { longitude: 115.0, latitude: 37.0 }, // 圆心点
            color: '#DD00DDCC', // 颜色
            name: {
                text: '不阻止冒泡',
                color: '#FFF',
                background: '#DD00DD00'
            },
        });
        // 元素事件，依然只加入 左键单击 与 右键单击 事件
        circle.on('Click', (item) => {
            this.$Message.info({
                content: '单体左键点击事件 ：' + item.options.data.text
            })
        });
        circle.on('RightClick', (item) => {
            this.$Message.info({
                content: '单体右键点击事件 ：' + item.options.data.text
            })
        })

        var circle2 = _Element.add('circle', {
            id: 'circle2',
            data: {
                text: '阻止冒泡示例',
            },
            radius: 200000, // 半径
            point: { longitude: 105.0, latitude: 37.0, height: 500 }, // 圆心点
            color: '#DD00DDCC', // 颜色
            name: {
                text: '阻止冒泡',
                color: '#FFF',
                background: '#00000000'
            },
        });
        // 第二个参数为stop，可以阻止冒泡事件(不触发图层上的左键点击事件)
        circle2.on('Click', (item, stop) => {
            stop();
            this.$Message.info({
                content: '单体左键点击事件 : ' + item.options.data.text
            })
        });
        circle2.on('RightClick', (item, stop) => {
            stop();
            this.$Message.info({
                content: '单体右键点击事件 ：' + item.options.data.text
            })
        })

    },
    methods: {
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        }
    },
    beforeDestroy() {
        // 不需要注销地图时，可单独注销图层
        _Element && _Element.Destroy();

        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}

.title {
    color: #fff;
}

.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}

.itemBox {
    margin-bottom: 5px;
}
</style>